<script setup>
import { ref } from "vue";
import { use } from "echarts/core";
import { MapChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  VisualMapComponent,
  GeoComponent
} from "echarts/components";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import VChart from "vue-echarts";
import * as echarts from "echarts/core";

use([
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer,
  UniversalTransition
]);

let option = ref(null);

(async () => {
  const map = (await import("../../assets/map/china")).default;
  echarts.registerMap("China", map);

  option.value = {
    visualMap: {
      show: true,
      min: 0,
      max: 500,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"]
      }
    },

    series: [{
      type: "map",
      data: [
        { name: "湖南省", value: 123 },
        { name: "湖北省", value: 112 },
        { name: "河南省", value: 421 },
        { name: "河北省", value: 321 },
        { name: "黑龙江省", value: 233 }
      ],
      map: "China",
      label: {
        show: true
      },
      universalTransition: true
    }]
  };
})();

</script>

<template>
  <v-chart :option="option" class="chart" autoresize />
</template>
